<template>
<div class="pt30">
  <el-form
    class="text-form"
    label-width="120px"
    size="small"
    ref="form"
  >
    <el-form-item label="菜单名称:" prop="menuName">
      <span>{{ params.menuName }}</span>
    </el-form-item>
    <el-form-item label="菜单地址:" prop="menuUrl">
      {{ params.menuUrl }}
    </el-form-item>
    <el-form-item label="接口地址:" prop="apiUrl">
      <div v-for="(item, index) in apiUrl" :key="index">
        {{ item }}
      </div>
    </el-form-item>
    <el-form-item label="菜单图标:" prop="iconUrl">
      <!-- v-if="+params.parentId" -->
      <img :src="params.iconUrl" alt="">
    </el-form-item>
    <el-form-item label="菜单状态:" prop="status">
        {{params.status==='1'?'启用':'停用'}}
    </el-form-item>
  </el-form>
  </div>
</template>

<script>
export default {
  name: 'MenuDetail',
  components: {},
  props: {
    params: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  computed: {
    apiUrl () {
      return (this.params.apiUrl && this.params.apiUrl.split(',')) || ['']
    }
  }
}
</script>
